<template>
    <div>
        <div class="title">
            <el-input maxlength="15" style="width:200px;margin-left:20px" placeholder="搜索关键词"
                      v-model="keyWord"></el-input>
            <el-button @click="getDataList" type="primary" style="margin-left:20px;">搜索</el-button>
        </div>
        <div class="data">
            <el-table v-loading="loading" :data="tableData" style="width: 100%">
                <el-table-column prop="cardNo" :formatter="cardNo" label="卡号" align="center"
                                 min-width="100"></el-table-column>
                <el-table-column prop="userName" label="用户名" align="center" min-width="80"></el-table-column>
                <el-table-column prop="rechargeNumber" label="充值唯一编号" align="center" min-width="80"></el-table-column>

                <el-table-column prop="chargeUserMobile" align="center" label="充值手机号" min-width="80"></el-table-column>
                <el-table-column prop="mobile" align="center" label="被充值手机号" min-width="80"></el-table-column>
                <el-table-column prop="amount" label="金额" align="center" min-width="120"></el-table-column>
                <el-table-column prop="time" label="时间" align="center" min-width="120"></el-table-column>
                <el-table-column prop="status" label="状态" align="center" min-width="120"></el-table-column>
                <el-table-column prop="type" label="类型" align="center" :formatter="type"
                                 min-width="120"></el-table-column>
                <el-table-column label="操作" align="center" min-width="180">
                    <template slot-scope="scope">
                        <el-link v-if="scope.row.type!=4&&scope.row.type!=5&&scope.row.type!=6" @click="refundHandler(scope.row)">退款
                        </el-link>

                        <!--                      <el-link @click="editCardHandler(scope.row)" icon="el-icon-edit">编辑</el-link>-->
                        <!--                    <el-link>使用记录</el-link>-->
                        <!--                    <el-link @click="lossCardHandler(scope.row)">挂失</el-link>-->
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog title="退款" :visible.sync="dialogVisibleRefund" width="40%">
                <div class="order">
                    <el-form ref="formRefund" :model="formDataRefund" label-width="100px" :rules="formRule">
                        <div class="order-1">
                            <div class="text">id</div>
                            {{data.id}}
                        </div>
                        <div class="order-1">
                            <div class="text">用户名</div>
                            {{data.userName}}
                        </div>
                        <div class="order-1">
                            <div class="text">金额</div>
                            {{data.amount}}
                        </div>
                        <div class="order-1">
                            <div class="text">手机号</div>
                            {{data.mobile}}
                        </div>
                        <el-form-item class="nav-form-item" label="退款金额" prop="amount"
                                      style="margin-top:20px;margin-left:-20px">
                            <el-input
                                    maxlength="6"
                                    type="text"
                                    v-model="formDataRefund.amount1"
                                    style="width:300px;"
                                    placeholder="请输入退款金额"
                                    clearable
                            />
                        </el-form-item>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisibleRefund = false">取 消</el-button>
        <el-button type="primary" @click="confimRefundHandler">确 定</el-button>
      </span>
            </el-dialog>
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-size="pageSize"
                    :total="total"
            ></el-pagination>
        </div>
    </div>
</template>
<script>
    import {getChongzhiRecods, refundOrder} from '@/api/registerUser'
    import {getToken} from '@/utils/auth'

    export default {
        data() {
            return {
                tableData: [],
                userId: this.$route.query.userId,
                keyWord: '',
                page: 1,
                pageSize: 10,
                loading: true,
                total: 0,
                data: {},
                dialogVisibleRefund: false,
                formDataRefund: {
                    amount: "",
                    recordId: "",
                    amount1: ""
                }
            }
        },
        created() {
            this.getDataList()
        },
        methods: {
            refundHandler(row) {
                this.data = row
                this.formDataRefund.recordId = row.id
                this.formDataRefund.amount = ''
                this.dialogVisibleRefund = true
            },
            confimRefundHandler() {
                if (this.formDataRefund.amount1 <= 0 || this.formDataRefund.amount1 > this.data.amount) {
                    this.$message.error("退款金额应在0到充值金额之间哦")
                    return;
                }
                this
                this.$refs.formRefund.validate(valid => {
                    if (valid) {
                        refundOrder(this.formDataRefund).then(res => {
                            if (res.message.code != 0) {
                                this.$message.error(res.message.message)
                            } else {
                                this.$message({
                                    message: '操作成功',
                                    type: 'success'
                                })
                                this.dialogVisibleRefund = false
                                this.getDataList()
                            }
                        })
                    }
                })
            },
            cardNo(row) {
                if (row.cardNo) {
                    return row.cardNo
                } else {
                    return '-'
                }
            },
            type(row) {
                switch (row.type) {
                    case 0:
                        return "充值";
                        break;
                    case 1:
                        return "消费";
                        break;
                    case 2:
                        return "赠送";
                        break;
                    case 3:
                        return "系统充值";
                        break;
                    case 4:
                        return "退款";
                        break;
                    case 5:
                        return "退款失败";
                        break;
                    case 6:
                        return "转款";
                        break;
                    default:
                        return "";
                        break;
                }
            },
            getDataList() {
                this.loading = true
                let param = {
                    userId: this.userId,
                    keyWord: this.keyWord,
                    pageNo: this.page,
                    pageSize: this.pageSize
                }
                getChongzhiRecods(param).then(res => {
                    this.tableData = [...res.data.records]
                    this.total = res.data.total
                    this.loading = false
                })
            },
            handleCurrentChange(val) {
                this.page = val
                this.getDataList()
            }
        },
        watch: {
            'formDataRefund.amount1': {
                handler: function (v) {
                    this.formDataRefund.amount = this.formDataRefund.amount1 * 100
                }
            }
        },
    }
</script>
<style scoped lang="scss">
    .data {
        margin-left: 20px;
        margin-top: 20px;
        margin-right: 10px;
    }

    .order {
        display: flex;
        flex-direction: column;
        color: #fff;

        .text {
            color: #4adfff;
            width: 100px;
        }

        .order-1 {
            padding: 8px 10px;
            display: flex;
        }
    }
</style>